<template>
    <div>
      <div class="login-box">
        <div class="outer_label">
          <img class="inner_label login_logo" src="../../assets/logo.png">
        </div>
        <div class="login_form">
          <label>用户名:</label>
          <input type="text"  class="qxs-ic_user qxs-icon"  placeholder="用户名" v-model="username">
        </div>
        <div class="login_form"> 
          <label>密码:</label>
          <input type="text"  class="qxs-ic_password qxs-icon"  placeholder="密码" v-model="password">
        </div>
        <div>
            <el-button class="login_btn" @click.native="login" type="primary" round :loading="isBtnLoading">性能登录</el-button>
        </div>
          
      </div>
    </div>
   </template>
  
  <script>
  //  import { userLogin } from '../../api/api';
  import request from "../../../util/request.js"
  import api from "../../../util/api.js"
  import home from "../home/home.vue"
  
  //import echarts from "echarts"
  
  export default {

      data() {
        return {
          username: '',
          password: '',
          isBtnLoading: false
        }
      },
      created () {
        if(JSON.parse( localStorage.getItem('user')) && JSON.parse( localStorage.getItem('user')).username){
          this.username = JSON.parse( localStorage.getItem('user')).username;
          this.password = JSON.parse( localStorage.getItem('user')).password;
        }
      },
      computed: {
        btnText() {
          if (this.isBtnLoading) return '登录中...';
          return '登录';
        }
      },
      // components: {
      //   home,
      // },
      methods: {
        async login() {
          // if (!this.userName) {
          //   this.$message.error('请输入用户名');
          //   return;
          // }
          // if (!this.password) {
          //   this.$message.error('请输入密码');
          //   return;
          // }
         
        
        const res = await request.post(api.login, {'username': this.username, 'password': this.password})
        console.log(res.msg)
        // if(res.msg=='success!'){
        //   this.$router.push('/home')
        
        // } 
        // else{

        //   this.$router.push('/login')

        // }    
        
        }
      }
  }
  </script>
  <style>
    .login-box{
      margin: 20px;
      margin-top: 20px;

    }
    .login_form {
      padding-top: 20px;
      padding-left: 35%;
      padding-right: 35%;
    }
    .qxs-ic_user {
      /*background: url("../../assets/login/ic_user.png") no-repeat;*/
      background-size: 13px 15px;
      background-position: 3%;
    }
    .qxs-ic_password {
      /*background: url("../../assets/login/ic_password.png") no-repeat;*/
      background-size: 13px 15px;
      background-position: 3%;
      margin-bottom: 20px;
    }
    .login_logo {
      height: 100%;
    }
    .login_btn {
      /* margin-left: 5%; */
      width: 20%;
      font-size: 16px;
      background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */
      filter: brightness(1.4);
    }
  </style>
 
  